<template>
    <div class="content">
        <div class="header">
            <h1>收银员登录</h1>
        </div>
        <div class="main">
            <div class="main_content">
                <div class="form">
                    <div class="item flex-row align-center">
                        <div class="label">工号：</div>
                        <div><input v-model="user.username" style="width: 200px" placeholder="请输入工号" /></div>
                    </div>
                    <div class="item flex-row align-center">
                        <div class="label">密码：</div>
                        <div><input v-model="user.password" type="password" style="width: 200px" placeholder="请输入密码" /></div>
                    </div>
                    <button class="button" @click="commit">登录</button>
                </div>
                <div class="other"></div>
            </div>
        </div>
    </div>
    
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useLoginStore } from "@/stores/loginStore.js";
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router"
import http from "@/api/index.js";

//登录仓库对象
const loginStore = useLoginStore();
const router = useRouter();

const user = reactive({
    username:"",
    password:""
})

const commit = async()=>{
    var result = await http.Login(user)
    if(result.data.status == 1){
        loginStore.token = result.data.data.token;
        loginStore.user = result.data.data.user;
        loginStore.permission = result.data.data.permission;
        router.push("/")
    }else{
        //错误给出信息提示
        ElNotification({
        title: "错误",
        message: result.data.message,
        type: "error",
        duration:2500
      });
    }
}
</script>
<style scoped>
@import "@/assets/css/common.css";
@import "@/assets/css/login.css";
</style>